<template>
    <div class="container">

        <t-table row-key="index" :columns="columns" :data="emptyData ? [] : data" :expanded-row-keys="expandedRowKeys"
            :expand-on-row-click="expandOnRowClick" :expand-icon="expandIcon" table-layout="auto" size="small" hover
            @expand-change="handleExpandChange" :pagination="pagination">
            <!-- 操作列 -->
            <template #operation="{ row }">
                <t-link hover="color" theme="primary" @click="handleClickOp(row)">
                    {{ row.statusText }}
                </t-link>
            </template>

            <!-- 展开行内容（核心） -->
            <template #expandedRow="{ row }">
                <div class="more-detail">
                    <p class="title"><b>申请人：</b></p>
                    <p class="content">{{ row.applicant }}</p>
                    <br />
                    <p class="title"><b>邮箱地址：</b></p>
                    <p class="content">{{ row.detail.email }}</p>
                    <br />
                    <p class="title"><b>签署方式：</b></p>
                    <p class="content">{{ row.channel }}</p>
                    <br />
                    <p class="title"><b>申请事项：</b></p>
                    <p class="content">{{ row.matters }}</p>
                </div>
            </template>
        </t-table>
    </div>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue';
import type { TableProps } from 'tdesign-vue-next';
import {
    ChevronRightCircleIcon,
    ChevronRightIcon,
} from 'tdesign-icons-vue-next';

// 静态数据（硬编码，无函数生成）
const data = ref([
    {
        index: 1,
        applicant: '贾明',
        status: 0,
        statusText: '查看详情',
        channel: '电子签署',
        detail: { email: 'w.cezkdudy@lhll.au' },
        matters: '宣传物料制作费用',
        createTime: '2022-01-01',
    },
    {
        index: 2,
        applicant: '张三',
        status: 1,
        statusText: '再次申请',
        channel: '纸质签署',
        detail: { email: 'r.nmgw@peurezgn.sl' },
        matters: 'algolia 服务报销',
        createTime: '2022-02-01',
    },
    {
        index: 3,
        applicant: '王芳',
        status: 2,
        statusText: '再次申请',
        channel: '纸质签署',
        detail: { email: 'p.cumx@rampblpa.ru' },
        matters: '相关周边制作费',
        createTime: '2022-03-01',
    },
    {
        index: 4,
        applicant: '李雷',
        status: 0,
        statusText: '查看详情',
        channel: '电子签署',
        detail: { email: 'li.lei@example.com' },
        matters: '激励奖品快递费',
        createTime: '2022-04-01',
    },
    {
        index: 5,
        applicant: '韩梅梅',
        status: 1,
        statusText: '再次申请',
        channel: '纸质签署',
        detail: { email: 'han.meimei@example.com' },
        matters: '会议场地租赁费',
        createTime: '2022-05-01',
    },
]);

// 响应式状态
const expandOnRowClick = ref(false);
const expandedRowKeys = ref<string[]>(['2']);
const fixedColumns = ref(false);
const emptyData = ref(false);

// 列配置（纯模板友好，无 render 函数）
const columns = computed<TableProps['columns']>(() => [
    {
        colKey: 'applicant',
        title: '申请人',
        width: '100',
        fixed: fixedColumns.value ? 'left' : undefined,
    },
    {
        colKey: 'statusText', // 直接显示文本
        title: '操作提示',
    },
    {
        colKey: 'channel',
        title: '签署方式',
    },
    {
        colKey: 'detail.email',
        title: '邮箱地址',
        ellipsis: true,
    },
    {
        colKey: 'createTime',
        title: '申请时间',
    },
    {
        colKey: 'operation',
        title: '操作',
        fixed: fixedColumns.value ? 'right' : undefined,
    },
]);


const pagination = ref<TableProps['pagination']>({
    defaultCurrent: 1,
    defaultPageSize: 15,
    total: 0,
});
// expandIcon 控制
const expandIcon = ref<TableProps['expandIcon']>(true);

// 展开状态变更
const handleExpandChange = (keys: string[]) => {
    expandedRowKeys.value = keys;
};

// 操作点击
const handleClickOp = (row: any) => {
    console.log('点击操作行:', row);
};


</script>

<style scoped lang="scss">
.container {
    width: 70%;
    margin: 50px auto;
}
</style>e